<template>
  <div class="slider" ref="slider" :style="{width: swidth}">
    <div class="process" :style="{width: pwidth, background:bgcolor}"></div>
    <div class="thunk" ref="trunk" :style="{left:swidth}">
      <div v-show="dotcolor==1" class="block_gray">
        <div class="_block_gray" >
        </div>
      </div>
      <div v-show="dotcolor==2" class="block_green">
        <div class="_block_green" >
        </div>
      </div>
      <div v-show="dotcolor==3" class="block_yellow">
        <div class="_block_yellow" >
        </div>
      </div>
      <div v-show="dotcolor==4" class="block_red">
        <div class="_block_red" >
        </div>
      </div>
      <div class="time" style="width: 230px;font-weight: 800; margin-left: -100px; margin-top: 12px">{{ lastdate }}</div>
      <div class="tips" :style="{left:tipleft,top:tiptop,width:'400px'}">
        {{ tip }}
      </div>
    </div>
  </div>
</template>
<script>
/*
* min 进度条最小值
* max 进度条最大值
* v-model 对当前值进行双向绑定实时显示拖拽进度
* */

export default {
  props: ['sliderwidth', 'processwidth', 'maintip', 'mbgcolor', 'dcolor', 'ldate', 'tops'],
  data() {
    return {
      swidth: 0 + 'px',
      pwidth: 0 + 'px',
      // eslint-disable-next-line vue/no-dupe-keys
      tip: '',
      bgcolor: 'linear-gradient(90deg,\n' +
        '  #e8762a 0%,\n' +
        '  #fcaf37 100%)',
      tipleft: 0 + 'px',
      twidth: 0,
      dotcolor: 1,
      lastdate: '',
      tiptop: '50px',
    };
  },
  // 渲染到页面的时候
  mounted() {

  },
  watch: {
    sliderwidth: {
      handler(newdata, olddata) {
        this.swidth = newdata + 'px';
        this.twidth = newdata;
      },
      deep: true,
      immediate: true,
    },
    processwidth: {
      handler(newdata, olddata) {
        this.pwidth = newdata + 'px';
        // this.tipleft = (newdata + this.twidth - 30) + 'px';
        this.tipleft = '-190' + 'px';
      },
      deep: true,
      immediate: true,
    },
    maintip: {
      handler(newdata, olddata) {
        this.tip = newdata;
      },
      deep: true,
      immediate: true,
    },
    mbgcolor: {
      handler(newdata, olddata) {
        this.bgcolor = newdata;
      },
      deep: true,
      immediate: true,
    },
    dcolor: {
      handler(newdata, olddata) {
        this.dotcolor = newdata;
      },
      deep: true,
      immediate: true,
    },
    ldate: {
      handler(newdata, olddata) {
        this.lastdate = newdata;
      },
      deep: true,
      immediate: true,
    },
    tops: {
      handler(newdata, olddata) {
        this.tiptop = newdata + 'px';
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {},
};
</script>
<style>
.slider {
  position: relative;
  margin: 20px 0;
  height: 15px;
  cursor: pointer;
  background-color: #d8d8d8;
}
.slider .process {
  position: absolute;
  left: 0;
  top: 0;
  width: 0px;
  height: 14px;
  background-image: linear-gradient(90deg,
  #e8762a 0%,
  #fcaf37 100%);
}

.slider .thunk {
  position: absolute;
  top: -10px;
  width: 20px;
  height: 10px
}

.slider .block_gray {
  right: 0px;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: solid 6px #ffffff;
  z-index: 1;
  background-color: #8b98ad;
  box-shadow: 0px 0px 15px 0px #8b98ad;
}


/*完成*/
.slider .block_green {
  right: 0px;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  z-index: 1;
  border: solid 6px #ffffff;
  background-color: #21c48f;
  box-shadow: 0px 0px 15px 0px #21c48f;
}

/*超期*/
.slider .block_red {
  right: 0px;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: solid 6px #ffffff;
  z-index: 1;
  background-color: #f44c54;
  box-shadow: 0px 0px 15px 0px rgba(195, 0, 0, 0.8);
}
/*范围内*/
.slider .block_yellow {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  z-index: 1;
  background-color: #f9a836;
  box-shadow: 0px 0px 15px 0px #ff8e23;
}

.slider .tips {
  position: absolute;
  bottom: 20px;
  width: 100px;
  float: left;
  height: 28px;
  font-family: PingFangSC-Regular;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333333;
}
.time{
  height: 31px;
  font-family: PingFangSC-Semibold;
  font-size: 22px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333333;
}
.slider .block:hover {
  transform: scale(1.1);
  opacity: .6
}
</style>
